<template>
  <div>
    <!-- 顶部的消息提示 -->
     <el-alert
      :title="`数据一共 ${pageDate.counts} 条`"
      type="info"
      show-icon>
      </el-alert>
      <!-- 表格数据 -->
    <el-table v-loading="tableLoading" :data="tableDate" border style="width: 100%">
     <el-table-column prop="number" label="试题编号" width="150">
     </el-table-column>
     <el-table-column prop="subject" label="学科" width="120">
     </el-table-column>
     <el-table-column prop="catalog" label="目录" width="120">
     </el-table-column>
     <el-table-column prop="questionType" label="题型" width="120">
       <template #default="{row}">
       {{handleQuestionType(row.questionType)}}
       </template>
     </el-table-column>
     <el-table-column prop="question" label="题干" width="300">
       <template #default="{row}">
       <div v-html="row.question"></div>
       </template>
     </el-table-column>
     <el-table-column prop="addDate" label="录入时间"  width="200">
       <template #default="{row}">
       {{row.addDate | handleTime}}
       </template>
     </el-table-column>
     <el-table-column prop="difficulty" label="难度"  width="120">
        <template #default="{row}">
       {{handleDifficulty(row.difficulty)}}
       </template>
     </el-table-column>
     <el-table-column prop="creator" label="录入人"  width="120">
     </el-table-column>
     <el-table-column prop="chkState" label="审核状态"  width="120">
       <template #default="{row}">
       {{handleChkType(row.chkState)}}
       </template>
     </el-table-column>
     <el-table-column prop="chkRemarks" label="审核意见"  width="120">
     </el-table-column>
     <el-table-column prop="chkUser" label="审核人"  width="120">
     </el-table-column>
       <el-table-column prop="publishState" label="发布状态"  width="120">
         <template #default="{row}">
       {{handlePublishType(row.chkState,row.publishState)}}
       </template>
     </el-table-column>
     <el-table-column fixed="right" label="操作" width="300">
      <template #default="{row}">
        <el-button type="text" size="small" @click="previewFn(row)">预览</el-button>
        <el-button :disabled="+row.chkState!==0" type="text" size="small" @click="clickChk(row.id)">审核</el-button>
        <el-button
        @click="$router.push('/questions/new')"
        :disabled="handlePublishType(row.chkState,row.publishState)==='已发布'"
        type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="HandlePublishChange(row.id,row.publishState)">
          {{handlePublishType(row.chkState,row.publishState)==='已发布'? '下架':'上架'}}
        </el-button>
        <el-button
        type="text"
        :disabled="handlePublishType(row.chkState,row.publishState)==='已发布'"
        @click="delQuestion(row)"
        size="small">删除</el-button>
      </template>
     </el-table-column>
    </el-table>
    <!-- 分页显示 -->
     <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDate.page"
      :page-sizes="[1,3,5,10]"
      :page-size="pageDate.pagesize"
      layout=" prev, pager, next, sizes, jumper"
      :total="pageDate.counts">
    </el-pagination>
    <!-- 审核的对话框 -->
    <el-dialog title="题目审核" :visible="isShowChk" width="20%" @close="closeChk">
      <div style="margin-bottom:20px">
          <el-radio v-model="chkDialogObj.chkState" :label="1">通过</el-radio>
          <el-radio v-model="chkDialogObj.chkState" :label="2">拒绝</el-radio>
      </div>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="chkDialogObj.chkRemarks">
      </el-input>
      <template #footer>
        <el-button @click="closeChk">取消</el-button>
        <el-button type="primary" @click="submitChk">确认</el-button>
      </template>
    </el-dialog>
    <!-- 预览题目的对话框 -->
    <choiceQuestionDialog :isShowPriview.sync="isShowPriview" :rowItem="rowItem"></choiceQuestionDialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { choice, choicePublish, choiceCheck, remove } from '@/api/hmmm/questions.js'
import { questionType, difficulty, chkType } from '@/api/hmmm/constants.js'
import choiceQuestionDialog from '@/module-hmmm/components/choiceQuestionDialog'
export default {
  components: { choiceQuestionDialog },
  props: {
    chkState: {
      required: true,
      type: String
    },
    chkOBJ: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      tableDate: [],
      pageDate: {
        counts: 0,
        page: 1,
        pagesize: 10
      },
      tableLoading: false,
      isShowChk: false,
      chkDialogObj: {
        chkRemarks: '',
        chkState: 1,
        id: ''
      },
      isShowPriview: false,
      rowItem: {}
    }
  },
  created () {
    // 页面打开时发请求拿数据--->通过判断chkState进行不同tab的渲染(请求)
    if (this.chkState === 'all') {
      this.getTableData(this.pageDate)
    } else {
      this.getTableData({ ...this.pageDate, chkState: this.chkState })
    }
  },
  methods: {
    // 发请求获取表格数据
    async getTableData (chkOBJ) {
      this.tableLoading = true
      const res = await choice(chkOBJ)
      this.pageDate.counts = res.data.counts
      this.tableDate = res.data.items
      this.tableLoading = false
      console.log(res)
    },
    // 处理表格中的渲染问题
    handleQuestionType (val) {
      const obj = questionType.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handleDifficulty (val) {
      const obj = difficulty.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handleChkType (val) {
      const obj = chkType.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handlePublishType (cval, pval) {
      if (+cval !== 1) return '待发布'
      if (+pval) return '已发布'
      if (!+pval) return '已下架'
    },
    // 分页器上的两个函数
    handleSizeChange (val) {
      this.pageDate.pagesize = val
      this.pageDate.page = 1
      this.getTableData({ ...this.chkOBJ, ...this.pageDate })
    },
    handleCurrentChange (val) {
      this.pageDate.page = val
      this.getTableData({ ...this.chkOBJ, ...this.pageDate })
    },
    // 控制上架和下架
    HandlePublishChange (id, publishState) {
      let msg
      if (+publishState === 1) {
        publishState = 0
        msg = '您确定要下架这道题目么?'
      } else {
        publishState = 1
        msg = '您确定要上架这道题目么?'
      }
      // 提示
      this.$confirm(msg, '温馨提示').then(async () => {
        const res = await choicePublish({ id, publishState })
        if (res.data.success) {
          // 重新获取数据进行渲染
          this.$message.success('恭喜您,操作成功')
          this.getTableData({ ...this.chkOBJ, ...this.pageDate })
        } else {
          this.$message.error('操作失败')
        }
      }).catch(() => {})
    },
    // 点击了审核按钮
    clickChk (id) {
      this.isShowChk = true
      this.$message.warning('请输入审核信息')
      this.chkDialogObj.id = id
    },
    // 关闭了审核对话框
    closeChk () {
      this.isShowChk = false
      this.chkDialogObj = {
        chkRemarks: '',
        chkState: '',
        id: ''
      }
    },
    // 提交审核的按钮
    async submitChk () {
      const res = await choiceCheck(this.chkDialogObj)
      if (res.data.success) {
        // 提示用户  关对话框  重新渲染
        this.$message.success('操作成功')
        this.closeChk()
        this.getTableData({ ...this.chkOBJ, ...this.pageDate })
      }
    },
    // 点击了预览按钮
    previewFn (row) {
      this.rowItem = row
      this.isShowPriview = true
    },
    // 点击了删除按钮
    delQuestion (row) {
      this.$confirm('删除操作不可逆,您确定要继续么?', '温馨提示').then(async () => {
        const res = await remove(row)
        if (res.data.success) {
          this.$message.success('恭喜,删除成功')
          this.getTableData({ ...this.chkOBJ, ...this.pageDate })
        }
      }).catch(() => {})
    }
  },
  filters: {
    // 调整时间格式
    handleTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert{
  margin-bottom: 10px;
}
.el-pagination{
  float: right;
  margin-top: 20px;
}
</style>
